<template>
  <div class="about">
    <el-upload drag action :auto-upload="false" :show-file-list="false" :on-change="changeFile">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>

    <!-- IMG -->
    <div class="uploadImg" v-show="img">
      <img :src="img" alt />
    </div>
  </div>
</template>
<script>
import { fileParse } from "@/utils/common";
import qs from "qs";
export default {
  data() {
    return {
      img: null,
    };
  },
  methods: {
    async changeFile(file) {
      // console.log('file', file)
      if (!file) return;
      const fileData = file.raw;
      const result = await fileParse(fileData, "base64");
      const files = await this.$http.post(
        "/api/single2",
        qs.stringify({
          // qs.stringify可以把一个对象解析成x-www-form-urlencoded格式
          chunk: encodeURIComponent(result), // 转译/等符号，避免传输过程中丢失、乱码
          filename: fileData.name,
        }),
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        }
      );
      const res = files.data;
      if (res.code == 200) {
        this.img = res.path;
      }
    },
  },
};
</script>
